<template>
	<div class="cententfif" scoped>
		<div class="sift">
			<div class="sift-title">
				<span class="sift-title-tu"></span>
				<span class="sift-title-mun">
				淘宝素材
			    </span>
				<em class="sift-title-count">为淘宝店主和电商设计师提升工作效率，提高店铺转化率</em>

				<div class="sift-title-find">
					<a href="" class="sift-title-find-a">查看更多 ></a>
				</div>
			</div>
			<ul class="list">
				<a href="">
					<li @mouseenter='enter' @mouseleave="leave" class="line-tu" v-for='(sd,index) in linetow'><img :src="sd.url" />
						<span class="ceng"></span>
						<span class="line-tu-change">
						<span class="line-tu-change-boxone">
							<a href="" class="line-tu-change-boxone-a">收藏</a>
						</span>
						<span class="line-tu-change-boxtow">
							<a href="" class="line-tu-change-boxtow-tow">下载</a>
						</span>
						</span>
						<a class="line-tu-a" href="" :title='sd.title'>{{sd.title}}</a>
					</li>
				</a>

			</ul>
		</div>
	</div>

</template>

<script>
	export default {
        methods:{
			enter(e) {
				
				$(e.target).find('.line-tu-change').stop().animate({ top: "0" })
			},
			leave(e) {
				$(e.target).find('.line-tu-change').stop().animate({ top: "-45px" })
				
			}
		},
		data() {
			return {
				linetow: [{
					title: "淘宝春季日常护肤品手绘首页装修店铺模板",
					url: "static/siftfifi/1.png"
				}, {
					title: "天猫新风尚春夏美妆清新绿色春季护肤品",

					url: "static/siftfifi/2.png"
				}, {
					title: "淘宝天猫春季简约清新化妆品首页店铺模",

					url: "static/siftfifi/3.png"
				}, {
					title: "中国风清新粽子五芳斋端午节详情页模板",

					url: "static/siftfifi/4.png"
				}, {
					title: "淘宝天猫春季春夏新风尚女装首页模板下",

					url: "static/siftfifi/5.png"
				}, {
					title: "淘宝天猫简约毛绒玩具公仔首页活动页",

					url: "static/siftfifi/6.png"
				}, {
					title: "男鞋唯品会页面设计",

					url: "static/siftfifi/7.png"
				}, {
					title: "淘宝天猫复古文艺中国风促销海报毛笔字素材",

					url: "static/siftfifi/8.png"
				}]
			}
		}

	}
</script>

<style lang="less" rel="stylesheet/less">
	.cententfif {
		position: absolute;
		width: 100%;
		height: 842px;
		top: 3795px;
		margin-top: 20px;
		.sift {
			width: 1200px;
			height: 842px;
			margin: 0 auto;
			background: white;
			.sift-title {
				width: 1126px;
				height: 86px;
				margin-left: 24px;
				margin: 0 auto;
				.sift-title-tu {
					vertical-align: middle;
					display: inline-block;
					margin-right: 20px;
					width: 30px;
					height: 30px;
					background: url(new.png);
					background-position: -34px -338px;
				}
				.sift-title-mun {
					font-size: 20px;
					height: 84px;
					line-height: 84px;
					margin-right: 18px;
					/*font-weight: 700;*/
				}
				.sift-title-count {
					color: rgb(255, 114, 0);
					font-size: 14px;
					line-height: 86px;
					margin-right: 40px;
					font-style: normal;
				}
				.sift-title-find {
					float: right;
					display: inline-block;
					border-radius: 2px;
					margin-top: 28px;
					width: 100px;
					height: 32px;
					.sift-title-find-a {
						height: 32px;
						line-height: 32px;
						font-size: 14px;
						padding-left: 15px;
						color: rgb(92, 92, 92);
					}
				}
			}
			.list {
				width: 1200px;
				height: 756px;
				.line-tu {
					position: relative;
					display: inline-block;
					margin-left: 32px;
					overflow: hidden;
					margin-bottom: 25px;
					&:hover .ceng {
						background: rgba(255, 255, 255, 0.2);
					}
					&:hover .line-tu-change {
						animation: ling 0.5s;
						animation-fill-mode: forwards;
					}
					.ceng {
						position: absolute;
						width: 260px;
						height: 300px;
						background: rgba(255, 255, 255, 0);
						top: 0;
						left: 0;
					}
					.line-tu-change {
						position: absolute;
						width: 260px;
						height: 45px;
						top: -45px;
						left: 0;
						font-size: 16px;
						text-align: center;
						vertical-align: middle;
						.line-tu-change-boxone {
							display: inline-block;
							float: left;
							margin-left: 5px;
							width: 93px;
							height: 45px;
							background: white;
							.line-tu-change-boxone-a {
								width: 93px;
								height: 45px;
								line-height: 45px;
								color: rgb(229, 229, 229);
							}
						}
						.line-tu-change-boxtow {
							float: right;
							margin-right: 5px;
							display: inline-block;
							width: 131px;
							height: 45px;
							background: rgb(0, 161, 94);
							.line-tu-change-boxtow-tow {
								width: 93px;
								height: 45px;
								line-height: 45px;
								color: rgb(255, 255, 255);
							}
						}
					}
					.line-tu-a {
						height: 52px;
						line-height: 52px;
						display: block;
						text-align: center;
						font-size: 14px;
						color: rgb(96, 96, 96);
					}
				}
			}
		}
	}
	
	@-webkit-keyframes ling {
		from {
			top: -45px;
		}
		to {
			top: 5px;
		}
	}
</style>